<template>
  <div class="main">
  <div style="background-color:#FCFCFC; font-family:'宋体',font-weight:'bold'; height:100%;">
      <div>
          <my-bread level1='个人中心' level2='修改密码' :level3="levelName"></my-bread>
      </div>
      <div style="margin-top:25px;margin-left:80px; ">
          <el-row :gutter="10" style="font-size:15px;color:#4D4D4D;">
              <el-col :span="2">
                  <div style="background-color:#FFEBCD;width:60px;height:60px;display:inline-block;border-radius:50%;overflow:hidden;">
                      <el-image :src="user.avatar" style="width:60px;height:60px;"></el-image>
                  </div>
                  <div style="margin-top:5px;margin-left:6px;"><span>{{user.nickname}}</span></div>
                  <div style="margin-top:50px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;"  @click="infomationClick()">个人信息<span style="color:#B0E0E6;" v-show="infomationShow" class="el-icon-s-promotion"></span></el-button></div>
                  <div style="margin-top:5px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;" @click="passwordClick()">修改密码<span style="color:#B0E0E6;" v-show="passwordShow" class="el-icon-s-promotion"></span></el-button></div>
                  <div style="margin-top:5px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;" @click="avatarClick()">修改头像<span style="color:#B0E0E6;" v-show="avatarShow" class="el-icon-s-promotion"></span></el-button></div>
                  <div style="margin-top:5px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;" @click="shoucangClick()">我的收藏<span style="color:#B0E0E6;" v-show="shoucangShow" class="el-icon-s-promotion"></span></el-button></div>
                  <div style="margin-top:5px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#4D4D4D;" @click="dingdanClick()">我的订单<span style="color:#B0E0E6;" v-show="dingdanShow" class="el-icon-s-promotion"></span></el-button></div>
                </el-col>

              <el-col :span="21">
                  <el-row :gutter="10" style="margin-top:20px;">
                      <el-col :span="2"><div style="text-align:right; font-size:15px"><span>账号：</span></div></el-col>
                      <el-col :span="5">{{!user.mobile? user.mobile:user.nickname}}</el-col>
                  </el-row>
                  <!-- 个人信息 -->
                  <el-row v-show="infomationShow">
                    <el-card style="margin-top:30px;">
                        <el-row>
                            <el-col :span="6">
                                <el-row :gutter="12" style="margin-top:20px;">
                                    <el-col :span="8"><div style="text-align:right;"><span>姓名：</span></div></el-col>
                                    <el-col :span="16">{{user.nickname}}</el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:30px;">
                                    <el-col :span="8"><div style="text-align:right;"><span>手机号：</span></div></el-col>
                                    <el-col :span="16">{{user.mobile}}</el-col>
                                </el-row>
                                <!-- <el-row :gutter="12" style="margin-top:30px;">
                                    <el-col :span="8"><div style="text-align:right;"><span>电子邮箱：</span></div></el-col>
                                    <el-col :span="16">2036128127@qq.com</el-col>
                                </el-row> -->
                                <el-row :gutter="12" style="margin-top:30px;">
                                    <el-col :span="8"><div style="text-align:right;"><span>年龄：</span></div></el-col>
                                    <el-col :span="16">{{user.age}}</el-col>
                                </el-row>
                                <!-- <el-row :gutter="12" style="margin-top:30px;">
                                    <el-col :span="8"><div style="text-align:right;"><span>职位：</span></div></el-col>
                                    <el-col :span="16">部门负责人</el-col>
                                </el-row> -->
                                <el-row :gutter="12" style="margin-top:30px;">
                                    <el-col :span="8"><div style="text-align:right;"><span>项目：</span></div></el-col>
                                    <el-col :span="16">某某107项目</el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="18">
                                <el-row>
                                    <el-col>
                                        <el-timeline>
                                            <el-timeline-item timestamp="项目一" placement="top">
                                                <el-card>
                                                    <div><span><span style="font-family:'宋体'; font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                    <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                </el-card>
                                            </el-timeline-item>
                                            <el-timeline-item timestamp="项目二" placement="top">
                                                <el-card>
                                                    <div><span><span style="font-family:'宋体'; font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                    <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                </el-card>
                                            </el-timeline-item>
                                            <el-timeline-item timestamp="项目三" placement="top">
                                                <el-card>
                                                    <div><span><span style="font-family:'宋体'; font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                    <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                </el-card>
                                            </el-timeline-item>
                                            <el-timeline-item timestamp="项目四" placement="top">
                                                <el-card>
                                                    <div><span><span style="font-family:'宋体'; font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                    <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                </el-card>
                                            </el-timeline-item>
                                            <el-timeline-item timestamp="项目五" placement="top">
                                                <el-card>
                                                    <div><span><span style="font-family:'宋体'; font-size:15px;"><strong>项目名称</strong></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><strong>管理单位</strong></span></span></div>
                                                    <div><span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span></div>
                                                </el-card>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-row>
                <!-- 修改密码 -->
                <el-row v-show="passwordShow">
                    <el-card style="margin-top:30px;">
                        <el-form :model="personalForm">
                            <el-row :gutter="12" style="margin-top:20px;">
                                <el-col :span="6">
                                    <div style="text-align:right;"><span>账号：</span></div>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="account">
                                        <el-input type="text" v-model="personalForm.account" placeholder="请输入您的账号" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="12" style="margin-top:1px;">
                                <el-col :span="6">
                                    <div style="text-align:right;"><span>手机号：</span></div>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="phone_num">
                                        <el-input type="text" v-model="personalForm.mobile" placeholder="绑定的手机号" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="12" style="margin-top:1px;">
                                <el-col :span="6">
                                    <div style="text-align:right;"><span>密码：</span></div>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="password1">
                                        <el-input type="password" show-password v-model="personalForm.password1" placeholder="请输入新的密码" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="12" style="margin-top:1px;">
                                <el-col :span="6">
                                    <div style="text-align:right;"><span>确认密码：</span></div>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="password2">
                                        <el-input type="password" show-password v-model="personalForm.password2" placeholder="请再次输入新的密码" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="12" style="margin-top:1px;">
                                <el-col :span="6">
                                    <div style="text-align:right;"><span>验证码：</span></div>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item prop="verification">
                                        <el-input type="text" v-model="personalForm.code" placeholder="验证码" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" plain round size="medium" @click="getCodeFun()" :disabled="isDisabled">{{ buttonName }}</el-button>
                                </el-col>
                            </el-row>
                            <el-row :gutter="12" style="margin-top:10px;">
                                <el-col :span="17" style="text-align:center;">
                                    <el-button type="primary" plain round size="medium" @click="submit()">修改</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-card>
                </el-row>

                <!-- 我的收藏 -->
                <el-row v-show="shoucangShow">
                    <el-card style="margin-top:30px;" :height="600">
                        <el-col :span="18" v-if="collects == null">
                            <div><span>{{"暂无收藏"}}</span></div>
                        </el-col>

                        <el-col :span="18"  v-else>
                                <el-row>
                                    <el-col>
                                        <el-scrollbar style="height:100%;width:100%"> <!-- 滚动条 -->
                                            <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->
                                        <el-row  style="height: 600px"><!--可显示区域-->
                                        <el-timeline v-for="collect in collects" :key="collect.id">
                                            <el-timeline-item timestamp="我的收藏" placement="top">
                                                <el-card>
                                                    <!--                                                                                                                                    -->            
                                                    <div><span><span style="font-family:'宋体'; font-size:15px;"><a :href="'/course/'+collect.id"><strong>{{collect.title}}</strong></a></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><a :href="'/teacher/'+collect.teacherId"><strong>{{collect.teacherName}}</strong></a></span></span></div>
                                                    <!--                                                                                                                                           -->
                                                    <div><span>发布时间：{{collect.gmtCreate}}</span><span style="margin-left:20px;">价格：{{'￥'+ collect.price}}</span><a style="font-family:'宋体';font-size:15px;margin-left:300px;cursor:pointer"   @click="quxiaoshoucang(collect.id)" title="取消收藏"><strong>取消收藏</strong></a></div>
                                                </el-card>
                                            </el-timeline-item>
                                            
                                        </el-timeline>
                                    </el-row>
                                    </el-scrollbar>

                                        <!-- 分页插件 -->
                                            <!-- 分页 -->
                                            <!-- page 当前页 limit 显示数  total总共-->
                                            <el-pagination
                                            :current-page="page"  
                                            :page-size="limit"
                                            :total="total"
                                            style="padding: 30px 0; text-align: center;"
                                            layout="total, prev, pager, next, jumper"
                                            @current-change="getList"
                                            />
                                            <!-- @current-change="getList" 分页的切换 每次切换都去查询一下 -->

                                    </el-col>
                                </el-row>
                            </el-col>

                    </el-card>
                </el-row>
                <!-- 修改头像 -->
                

                <!-- 我的订单 -->
                <el-row v-show="dingdanShow">
                    <el-card style="margin-top:30px;" :height="600">
                        <el-col :span="18" v-if="collects == null">
                            <div><span>{{"暂无订单"}}</span></div>
                        </el-col>

                        <el-col :span="18"  v-else>
                                <el-row>
                                    <el-col>
                                        <el-scrollbar style="height:100%;width:100%"> <!-- 滚动条 -->
                                            <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->
                                        <el-row  style="height: 600px"><!--可显示区域-->
                                        <el-timeline v-for="order in orders" :key="order.id">
                                            <el-timeline-item timestamp="我的订单" placement="top">
                                                <el-card>
                                                    <!--                                                                                                                                    -->            
                                                    <div><span><span style="font-family:'宋体'; font-size:15px;"><a :href="'/course/'+order.courseId"><strong>{{order.courseTitle}}</strong></a></span><span style="font-family:'宋体';font-size:12px;margin-left:20px;"><a :href="'/teacher/'+order.teacherId"><strong>{{order.teacherName}}</strong></a></span><span style="margin-left:35px; color:red;" v-if="order.status === 1">已支付</span><span style="margin-left:35px; color:gold;" v-if="order.status === 0">未支付</span></span></div>
                                                    <!--                                                                                                                                           -->
                                                    <div><span>下单时间：{{order.gmtCreate}}</span><span style="margin-left:20px;">价格：{{'￥'+ order.totalFee}}</span><a style="font-family:'宋体'; font-size:15px;margin-left:300px;cursor:pointer" v-if="order.status == 0"   @click="openOrder(order.courseId)" title="去支付"><strong>去支付</strong></a><a style="font-family:'宋体'; font-size:15px;margin-left:10px;cursor:pointer" v-if="order.status == 0"   @click="cancelxiadan(order.id)" title="取消下单"><strong>取消下单</strong></a><a style="font-family:'宋体'; font-size:15px;margin-left:300px;cursor:pointer" v-if="order.status == 1" :href="'/course/'+order.courseId"  title="查看课程"><strong>查看课程</strong></a></div>
                                                </el-card>
                                            </el-timeline-item>
                                            
                                        </el-timeline>
                                    </el-row>
                                    </el-scrollbar>

                                        <!-- 分页插件 -->
                                            <!-- 分页 -->
                                            <!-- page 当前页 limit 显示数  total总共-->
                                            <el-pagination
                                            :current-page="page1"  
                                            :page-size="limit1"
                                            :total="total1"
                                            style="padding: 30px 0; text-align: center;"
                                            layout="total, prev, pager, next, jumper"
                                            @current-change="getList"
                                            />
                                            <!-- @current-change="getList" 分页的切换 每次切换都去查询一下 -->

                                    </el-col>
                                </el-row>
                            </el-col>

                    </el-card>
                </el-row>
                
                
            </el-col>
        </el-row>
    </div>
    
    <div>

    </div>
  </div>
</div>
</template>

<script>
// 引入cookie
import cookie from 'js-cookie'
import ucenter from '@/api/ucenter'
import collect from '@/api/collect'
import order from '@/api/order'

export default {

data(){
    
    return {      
        src:'',
        levelName:'',
        isCollapse:false,
        infomationShow:false,
        passwordShow:false,
        avatarShow:false,
        shoucangShow:false,
        dingdanShow:false,
        buttonName:"发送短信",
        isDisabled:false,
        time:60,
        userInfo:{},
        imagecropperShow:false,
        personalForm:{
            account:"",
            mobile:"",
            code:"",
            password1:"",
            password2:"",
        },
        user:{},
        orders:[], // 订单
        collects:[], // 收藏
        page:1,// 当前页
        total:0, // 总记录数
        limit:5,// 每页显示记录数
        page1:1,// 当前页
        total1:0, // 总记录数
        limit1:5,// 每页显示记录数
    }
},
created() {
//   this.initcollect()
    this.getList()
    this.getListOrders()
  this.infomationClick()
  this.showInfo()
},

methods:{
    // 去支付
    openOrder(id){
        order.createOrders(id).then(resp => {
          
          if(resp.data.success){
              // 返回订单号
              // resp.data.data.orderNo
              // 生成订单号后要跳转到我们订单页面
              this.$router.push({path:'/order/'+resp.data.data.orderNo})
          } else {
            this.$message({
                type:'error',
                message:'请先登录'
              })
          }
        })
    },
    // 取消收藏
    quxiaoshoucang(id){
        
        this.$confirm('此操作将取消该收藏，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return collect.cancelCollectCourse(id)
                }).then(() => {
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '取消收藏成功!'
                    })
                }).catch((response) => { // 失败
                    if (response === 'cancel') {
                        
                    }
                })
        },

    // 查看自己的收藏
    initcollect(){
        collect.getAllCollect().then(resp => {
            this.collects = resp.data.data.collects
        })
    },
    getList(page = 1){
        this.page = page
        collect.getAllCollect(this.page,this.limit).then(resp => {
            this.collects = resp.data.data.collects
            this.total = resp.data.data.total
        })

    },
    cancelxiadan(id){
        this.$confirm('此操作将取消该该订单支付，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return order.removeOrder(id)
                }).then(() => {
                    this.getListOrders(this.page1)
                    this.$message({
                        type: 'success',
                        message: '取消订单成功!'
                    })
                }).catch((response) => { // 失败
                    if (response === 'cancel') {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        })
                    }
                })
        },
    // 查询所有订单
    getListOrders(page1 = 1){
        this.page1 = page1
        order.getOrdersByMemberId(this.page1,this.limit1).then(resp => {
            this.orders = resp.data.data.list
            this.total1 = resp.data.data.total
        })

    },
  showInfo(){
    // 从cookie中获取token信息
    var userStr = cookie.get('guli_ucenter')
    if(userStr && userStr !== 'undefined'){
      // 字符串转为json对象
      this.user = JSON.parse(userStr)
      console.log(this.user)
    }
  },
  handleOpen(key, keyPath) {
        console.log(key, keyPath)
        console.log(key)
        console.log(keyPath)
    },
    handleClose(key, keyPath) {
        // console.log(key, keyPath);
    },

    infomationClick(){    //个人信息事件
        this.infomationShow = true
        this.passwordShow = false
        this.avatarShow = false
        this.shoucangShow = false
        this.dingdanShow = false
    },

    // // 修改提交方法
    // submit(){
    //   ucenter.updatePassword(this.personalForm).then(resp => {
    //           // 提示信息
    //           this.$message({
    //             type: 'success',
    //             message: '修改成功'
    //           })

    //           // 跳转到登录页面
    //           // 路由跳转
    //           // this.$router.push({path:'/login'})
    //       })
    //   },
    shoucangClick(){
        this.avatarShow = false
        this.infomationShow = false
        this.passwordShow = false
        this.shoucangShow = true
        this.dingdanShow = false
        // this.initcollect()
        this.getList()
    },
    dingdanClick(){
        this.avatarShow = false
        this.infomationShow = false
        this.passwordShow = false
        this.shoucangShow = false
        this.dingdanShow = true
    },
    passwordClick(){     //密码事件
        this.avatarShow = false
        this.infomationShow = false
        this.passwordShow = true
        this.shoucangShow = false
        this.dingdanShow = false
    },
    avatarClick(){
        this.avatarShow = true
        this.infomationShow = false
        this.passwordShow = false
        this.shoucangShow = false
    },
    // 发送验证码
    // 这个就是获取验证码
    getCodeFun(){
        ucenter.sendCode(this.personalForm.mobile).then(resp => {
          this.sendMsg()
        })
    },
    sendMsg() {    //时间按钮
        let me = this;
        me.isDisabled = true;
        let interval = window.setInterval(function() {
            me.buttonName = "(" + me.time + ")秒"
            --me.time;
            if(me.time < 0) {
                me.buttonName = "重新发送"
                me.time = 60
                me.isDisabled = false
                window.clearInterval(interval)
            }
        }, 1000);
        //获取短信验证码
        // this.$http.get('/?phone_num=' + this.personalForm.phone_num).then(res => {
        //     this.$message.success("短信已发送,请查收")
        // })
    },
    submit(){  //提交
        if(this.personalForm.account === ""){
            this.$message.warning("账号不能为空")
        }else if(this.personalForm.phone_num === ""){
            this.$message.warning("手机号不能为空")
        }else if(this.personalForm.password1 === ""){
            this.$message.warning("密码不能为空")
        }else if(this.personalForm.password2 === ""){
            this.$message.warning("密码不能为空")
        }else if(this.personalForm.verification === ""){
            this.$message.warning("验证码不能为空")
        }else{
            if(this.personalForm.password1 === this.personalForm.password2){
              ucenter.updatePassword(this.personalForm).then(resp => {
                  // 提示信息
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  })
                  this.personalForm = {}
              })
                // this.$message.success("修改成功")
                // const params = {
                //     account:this.personalForm.account,
                //     phone_num:this.personalForm.phone_num,
                //     password1:this.personalForm.password1,
                //     password2:this.personalForm.password2,
                //     verification:this.personalForm.verification,
                // }
                // console.log(params)
                // this.$http.post('',params).then(res => {
                //     console.log(res)
                // })
            }else{
                this.$message.warning("两次输入的密码不一致,请重新输入")
            }
            
        }
    },

}
}
</script>

<style>
.name{ text-align: right; }
.value{ text-align: left; }
.previewBox {
      text-align: center;
      margin-left: 60px;
  }

  .preview {
      width: 150px;
      height: 150px;
      margin: 0px auto 20px auto;
      border-radius: 50%;
      border: 1px solid #ccc;
      background-color: #ccc;
      overflow: hidden;
  }

  .cropper {
      width: 260px;
      height: 260px;
  }
</style> -->
